<template>
  <div class="content" v-if="type == 0">
    <div class="title">请选择付款方式</div>
    <div class="buttons">
      <div
        class="button"
        v-for="(item, index) in info.mode"
        :key="index"
        @click="paymentFn(item.id)"
      >
        <img :src="item.image" alt="" />
        <div>{{ item.text }}</div>
      </div>
    </div>
  </div>

  <div class="content" v-if="type == 1 && index != 3">
    <div class="title">请扫二维码支付</div>
    <div class="pay">
      <div class="money" v-if="props.payType != 2">￥{{ money }}</div>
      <img
        :src="info.payImg.image"
        ref="myPayImg"
        width="150"
        height="150"
        alt=""
      />
      <div class="keep" @click="preserveImg">保存到本地</div>
      <div class="myInput" v-if="props.payType == 2">
        <span>￥ </span>
        <input type="text" placeholder="输入充值金额" v-model="myValue" />
      </div>
      <div class="submit" @click="nextStep(2)">付款完成？上传支付凭证</div>
    </div>
  </div>

  <div class="content" v-if="type == 1 && index == 3">
    <div class="title">请按下方信息支付</div>
    <div class="pay">
      <div class="money">￥{{ money }}</div>
      <div class="card">
        姓 名：<span>{{ info.payImg.name }}</span>
      </div>
      <div class="card">
        所属银行：<span>{{ info.payImg.bank }}</span>
      </div>
      <div class="card">
        银行卡号：<span>{{ info.payImg.card }}</span>
      </div>
      <div class="submit" @click="nextStep(2)">付款完成？上传支付凭证</div>
    </div>
  </div>

  <div class="content" v-if="type == 2">
    <div class="title">上传支付凭证</div>
    <van-uploader
      v-model="info.fileList"
      :after-read="afterRead"
      max-count="1"
      multiple
      style="width: 150px; height: 150px"
    />
    <div class="submit" @click="nextStep(3)">提交支付凭证</div>
  </div>

  <div class="content" v-if="type == 3">
    <img
      class="subImg"
      width="64"
      height="64"
      src="@/assets/image/succsee.png"
      alt=""
    />
    <div class="text">提交成功，请等待审核</div>
    <div class="ok" @click="nextStep(4)">好的</div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reactive, ref, useContext, inject, watch, onMounted } from "vue";
import {
  getProductCert,
  getPostCert,
  getProductPayment,
  postPayment,
  infoRecharge,
} from "@/api/http.js";
import { useRouter } from "vue-router";
import img1 from "../assets/image/weixin.png";
import img2 from "../assets/image/zhifubao.png";
import img3 from "../assets/image/yinhangka.png";
import compress from "../views/public/compress.js";
export default {
  name: "popup",
  props: {
    money: Number,
    myId: Number,
    Id: Number,
    productId: Number,
    payType: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const info = reactive({
      mode: [
        {
          image: img1,
          text: "微信支付",
          id: 1,
        },
        {
          image: img2,
          text: "支付宝",
          id: 2,
        },
        {
          image: img3,
          text: "银行卡",
          id: 3,
        },
      ],
      fileList: [],
      payImg: {},
    });
    const myValue = ref(null);
    const uploadCert = async () => {
      if (props.payType == 0) {
        const params = {
          productId: props.productId,
          payType: index.value,
          payCert: payCert.value,
        };
        console.log("params---", params);
        const data = await getProductCert(params);
        if (data.code != 200) return false;
      }
      if (props.payType == 1) {
        const params = {
          id: props.myId,
          transferCert: payCert.value,
        };
        const data = await getPostCert(params);
        if (data.code != 200) return Toast.fail(data.msg);
        Toast.success(data.msg);
      }
      if (props.payType == 2) {
        const params = {
          recharge: myValue.value,
          image: payCert.value,
        };
        const data = await infoRecharge(params);
        if (data.code != 200) return Toast.fail(data.msg);
        Toast.success(data.msg);
      }
    };

    const type = ref(0);
    const index = ref(0);

    const paymentFn = async (num) => {
      if (props.payType == 0) {
        const data = await getProductPayment({ id: props.Id, type: num });
        console.log("获取收款信息---", data);
        if (
          (data.data.image == null && (num == 1 || num == 2)) ||
          (data.data.card == null && num == 3)
        )
          return Toast.fail("暂无该支付方式，请选择其他支付方式");
        info.payImg = data.data;
        type.value = 1;
        index.value = num;
        console.log("获取首付款信息---", data);
      } else if (props.payType == 1 || props.payType == 2) {
        const data = await postPayment({ type: num });
        if (
          (data.data.image == null && (num == 1 || num == 2)) ||
          (data.data.card == null && num == 3)
        )
          return Toast.fail("暂无该支付方式，请选择其他支付方式");
        info.payImg = data.data;
        type.value = 1;
        index.value = num;
        console.log("获取首付款信息---", data);
      }
    };

    const ctx = useContext();
    const router = useRouter();
    const nextStep = (value) => {
      console.log("props.payType---", props.payType);
      if (value == 4) {
        if (props.payType == 0) {
          router.push({
            name: "OrderDetails",
            query: {
              orderId: props.myId,
            },
          });
        }

        if (props.payType == 1) {
          router.push({
            name: "myGoodsInfo",
            query: {
              orderId: props.myId,
            },
          });
        }

        if (props.payType == 2) {
          type.value = 0;
        }
        ctx.emit("onRmove");
        return;
      }

      if (value == 3) {
        if (payCert.value == "") return Toast.fail("请上传支付凭证");
        const data = uploadCert();
        console.log(data);
        if (!data) return Toast.fail("提交失败，请重试");
      }
      type.value = value;
      console.log("type.value---", type.value);
    };

    const myPayImg = ref(null);
    const preserveImg = () => {
      console.log(myPayImg.value.src);
      var alink = document.createElement("a");
      alink.href = myPayImg.value.src;
      alink.download = myPayImg.value.src;
      alink.click();
    };

    const myBool = inject("overlay");
    watch(
      () => myBool.value,
      (count) => {
        if (count) type.value = 0;
      }
    );

    const payCert = ref("");
    const afterRead = async (file) => {
      payCert.value = await compress(file);
    };

    onMounted(() => {
      index.value = 0;
    });

    return {
      info,
      type,
      paymentFn,
      index,
      nextStep,
      preserveImg,
      myPayImg,
      myBool,
      afterRead,
      props,
      myValue,
    };
  },
};
</script>

<style scoped lang="less">
.content {
  color: var(--textColor);
  background-color: var(--backColor);
  text-align: center;

  .title {
    width: 100%;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 1.125rem;
    letter-spacing: 1px;
    font-family: PingFang SC;
    font-weight: bold;
  }

  .buttons {
    width: 60%;
    margin: 0 auto;

    .button {
      width: 100%;
      padding: 15px 20px;
      border-radius: 20px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid var(--textColor);

      img {
        height: 20px;
      }

      div {
        width: calc(100% - 20px);
        text-align: center;
      }
    }
    .back {
      background-color: #807b7b;
    }
  }

  .pay {
    text-align: center;
    margin-top: -20px;

    .myInput {
      width: 50%;
      margin: 10px auto 0;
      position: relative;

      span {
        font-size: 1.5rem;
        color: #d91127;
        position: absolute;
        left: 0;
        bottom: 5px;
      }

      input {
        width: 100%;
        border: none;
        height: 40px;
        background-color: transparent;
        border-bottom: 1px solid var(--textColor);
        padding-left: 40px;
        box-sizing: border-box;
      }
      input::-webkit-input-placeholder {
        font-size: 0.8rem;
      }
      input:-moz-placeholder {
        font-size: 0.8rem;
      }
      input:-ms-input-placeholder {
        font-size: 0.8rem;
      }
    }

    .money {
      font-size: 25px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #c60000;
      margin-bottom: 20px;
    }

    .keep {
      margin-top: 20px;
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 400;
      text-decoration: underline;
      color: #999999;
    }

    .card {
      color: var(--textColorTwo);
      margin: 20px 0;
      font-weight: 400;

      span {
        color: var(--textColor);
        font-weight: 600;
      }
    }
  }

  .submit {
    width: 80%;
    height: 50px;
    background: #eda00a;
    border-radius: 50px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #f0f0f0;
    line-height: 50px;
    text-align: center;
    margin-left: 10%;
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .ok {
    width: 80%;
    height: 50px;
    background: transparent;
    border: 1px solid var(--textColor);
    border-radius: 50px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 800;
    color: var(--textColor);
    line-height: 50px;
    text-align: center;
    margin-left: 10%;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .subImg {
    margin: 60px 0 40px;
  }

  .text {
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: 700;
    color: var(--textColor);
  }

  /deep/ .van-uploader__wrapper {
    width: 100%;
    height: 100%;
  }

  /deep/ .van-uploader__upload {
    width: 100%;
    height: 100%;
  }

  /deep/ .van-uploader__upload-icon {
    font-size: 60px;
  }

  /deep/ .van-uploader__preview-image {
    width: 100%;
    height: 100%;
  }

  /deep/ .van-uploader__preview {
    width: 100%;
    height: 100%;
  }
}
</style>
